<template>
  <el-drawer
    title="会议室预约详情"
    :visible.sync="drawerVisible"
    size="60%"
  >
    <div v-loading="loading" class="details">
      <el-descriptions
        class="margin-top"
        title="审核信息"
        :column="3"
        border
      >
        <el-descriptions-item label="状态">
          <el-tag :type="stateType">{{
            details?.state === 1 ? '审核成功' :
            details?.state === 0 ? '审核失败' :
            details?.state === 2 ? '已撤销' : '待审核'
          }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title="预约人信息"
        :column="3"
        border
        style="margin-top: 20px;"
      >
        <el-descriptions-item label="预约人姓名">{{ details?.user?.username ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ details?.user?.phone ?? '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        class="margin-top"
        title="会议室信息"
        :column="3"
        border
        style="margin-top: 20px;"
      >
        <el-descriptions-item label="会议室名称">{{ details?.room?.name ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="会议室位置">{{ details?.room?.address ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="容纳人数">{{ details?.room?.quantity ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="会议室备注信息">{{ details?.room?.notes ?? '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        class="margin-top"
        title="预约信息"
        :column="3"
        border
        style="margin-top: 20px;"
      >
        <el-descriptions-item label="预约时间">{{ details?.start_time ? `${details.start_time} ~ ${details.end_time}` : '-' }}</el-descriptions-item>
        <el-descriptions-item label="预约原因">{{ details?.reason ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="会议内容">{{ details?.content ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="会议类型">{{ parseInt(details?.is_external) === 1 ? '外部会议' : '内部会议' }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ details?.notes ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ details?.created_at ? timeFormat(details.created_at) : '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script>
import { getConferenceRoomReserveDetail } from '@/api/conferenceRoom'
import { timeFormat } from '@/utils'

export default {
  name: 'ReserveDetailDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    recordId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      details: null,
      loading: false
    }
  },
  computed: {
    drawerVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    },
    stateType() {
      const stateMap = {
        1: 'success',
        0: 'danger',
        2: 'warning'
      }
      return stateMap[this.details?.state] || 'info'
    }
  },
  watch: {
    drawerVisible(n) {
      if (n && this.recordId) {
        this.getDetails()
      }
    }
  },
  methods: {
    timeFormat,
    async getDetails() {
      this.loading = true
      try {
        const res = await getConferenceRoomReserveDetail(this.recordId)
        console.log('res --------->', res)
        if (res.data.room) {
          res.data.room = JSON.parse(res.data.room)
        }
        this.details = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await this.sleep(500)
        this.loading = false
      }
    },
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    }
  }
}
</script>

<style lang="scss" scoped>
.details {
  padding: 0 20px;
}
</style>
